<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D照片墙</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #222;
            overflow: hidden;
            /*user-select: none; !*禁止选中*!*/
        }

        .perspective {
            perspective: 800px;
        }

        .wrap {
            transform-style: preserve-3d;
            width: 120px;
            height: 180px;
            margin: 100px auto;
            position: relative;
            transform: rotateX(-10deg) rotateY(0deg);
        }

        .wrap img {
            display: block;
            position: absolute;
            width: 133px;
            height: 200px;
            transform: rotateY(0deg) translateZ(0px);
            padding: 10px;
            background: transparent;
            box-shadow: 0 0 4px #FFF;
            border-radius: 5px;
            -webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .5) 100%);
        }

        .wrap p {
            width: 1200px;
            height: 1200px;
            background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));
            position: absolute;
            border-radius: 50%;
            left: 50%;
            top: 100%;
            margin-left: -600px;
            margin-top: -548px;
            transform: rotateX(90deg);
        }
    </style>
</head>
<body>
<div class="perspective">
    <div class="wrap">
        <img src="img/22.jpg" alt="">
        <img src="img/appale.png" alt="">
        <img src="img/autumn.jpg" alt="">
        <img src="img/bird.png" alt="">
        <img src="img/child1.png" alt="">
        <img src="img/child2.png" alt="">
        <img src="img/child3.png" alt="">
        <img src="img/lzpBlog-1.png" alt="">
        <img src="img/lzpBlog-2.png" alt="">
        <img src="img/lzpBlog-3.png" alt="">
        <img src="img/lzpBlog-4.png" alt="">
        <p></p>
    </div>
</div>

<script>
    window.onload = function () {
        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
        var oImg = document.querySelectorAll("img");
        var oWrap = document.querySelector(".wrap");
        var lastX, lastY, nowX, nowY, minusX, minusY, roY = 0, roX = -10;
        var timer = null;
        var length = oImg.length;
        var Deg = 360 / length;
        for (var i = 0; i < length; i++) {
            oImg[i].style.transform = 'rotateY('+i*Deg+'deg) translateZ(350px)';
            oImg[i].style.transition ='transform 1s ' + (length-1-i) * 0.2+'s';
        }

        mTop();
        function auto(){
            roY +=1;
            roX +=1;
            oWrap.style.transform='rotateY('+roY+'deg)';
            if(roY<=360){
                requestAnimationFrame(auto);
            }
            else{
                roY=0;
                requestAnimationFrame(auto);
            }
        };
        requestAnimationFrame(auto);
        window.onresize = mTop;
        function mTop() {
            var wH = document.documentElement.clientHeight || document.body.clientHeight;
            oWrap.style.marginTop = (wH / 2) - oWrap.offsetHeight + "px";
        };
        document.onmousedown = function (event) {
            cancelAnimationFrame(requestAnimationFrame(auto))
            event = event || window.event;
            lastX = event.clientX;
            lastY = event.clientY;
            clearInterval(timer);
            document.onmousemove = function (event) {
                event = event || window.event;
                nowX = event.clientX;
                nowY = event.clientY;
                minusX = nowX - lastX;
                minusY = nowY - lastY;
                roY += minusX * 0.2;
                roX -= minusY * 0.1;
                oWrap.style.transform = 'rotateX('+roX+'deg) rotateY('+roY+'deg)';
                lastX = nowX;
                lastY = nowY;
            }
            document.onmouseup = function () {
                document.onmousemove = null;
                timer = setInterval(function () {
                    minusX *= 0.9;
                    minusY *= 0.9;
                    roX -= minusY * 0.1;
                    roY += minusX * 0.2;
                    oWrap.style.transform = 'rotateX('+roX+'deg) rotateY('+roY+'deg)';
                    if (Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1) {
                        clearInterval(timer);
                    }
                }, 13);
            }
            return false;
        };
    };
</script>
</body>
</html>